<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>播放器demo</title>
  <link rel="stylesheet" href="/dist/css/viil.css">
  <style>
    #player {
      max-width: 800px;
    }
    #address {
      width: 500px;
    }
  </style>
</head>

<body>
  <div id="player"></div>

  <div>
    <br><br>
      目前支持MP4, flv, hls, dash
    <br><br>
    <input id="address">
    <input type="button" id="btn" value="切换">
  </div>
  <!-- <script src="https://unpkg.com/flv.js@latest/dist/flv.min.js"></script> -->
  <script src="https://cdn.bootcss.com/flv.js/1.4.2/flv.min.js"></script>
  <!-- <script src="https://unpkg.com/hls.js@0.10.1/dist/hls.min.js"></script> -->
  <script src="https://cdn.bootcss.com/hls.js/0.9.1/hls.min.js"></script>
  <!-- <script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script> -->
  <script src="https://cdn.bootcss.com/dashjs/2.6.8/dash.all.min.js"></script>
  <script src="https://cdn.bootcss.com/urljs/2.3.1/url.min.js"></script>
  <script src="/dist/umd/viil.js"></script>
  <script>
    var videourl = 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd'
    var btn = document.getElementById('btn')
    var input = document.getElementById('address')
    var qsObj = Url.parseQuery()
    if (qsObj.videourl) {
      videourl = qsObj.videourl
    }
    input.value = videourl
    btn.onclick = function () {
      var url = input.value
      location.href = location.origin + location.pathname + '?' + Url.stringify({videourl: url})
    }
  </script>
  <script>
    var player = viil('player')
    player.setup({
      playlist: [
        {
          file: videourl
        },
      ],
      logo: {
        file: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.png'
      },
      width: '100%',
      aspectratio: '16:9',
      repeat: true
    })
    player.on('mute', function (status) { console.log('mute', status)})
    player.on('volume', function (status) { console.log('volume', status)})
    player.on('resize', function (status) { console.log('resize', status)})
    player.on('complete', function (status) { console.log('complete', status)})
    player.on('playlistComplete', function (status) { console.log('playlistComplete',
      status)})
    player.on('playlistItem', function (status) { console.log('playlistItem', status)})
    player.on('playlist', function (status) { console.log('playlist', status)})
  </script>
</body>

</html>
